<template>
  <me-navbar class="product-header" :class="{'header-transition': headerTransition}">
    <i class="iconfont icon-back" slot="left" @click="backToHome"></i>
    <div class="title" slot="center" v-if="ifTitleShow">商品详情</div>
    <i class="iconfont icon-cart" slot="right"></i>
  </me-navbar>
</template>
<script>
import meNavbar from '@/base/me-navbar'
export default {
  name: 'productHeader',
  components: {
    meNavbar
  },
  data () {
    return {
      headerTransition: false,
      ifTitleShow: false
    }
  },
  methods: {
    backToHome () { // 返回首页
      this.$router.push({ name: 'home' })
    },
    changeHeaderStatus (translate) { // 改变头部背景色
      this.headerTransition = translate < -50
      this.ifTitleShow = translate < -50
    }
  }
}
</script>
<style lang="stylus" scoped>
.product-header
  color #fff
  transition background-color 1s
  .iconfont
    font-size 24px
    color red
  .title
    font-size 26px
    text-align center  
  &.header-transition
    background red
    .iconfont
      color white

</style>
